<template>
  <div class="page-container">
    <el-card shadow="none">
      <el-form inline>
        <el-form-item label="执行时间：">
          <el-date-picker
            v-model="searchParams.date"
            type="datetime"
            placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label-width="20px">
          <div class="refresh-icon" />
        </el-form-item>

        <el-form-item label-width="20px" style="float: right">
          <el-button type="primary" icon="el-icon-document">导出</el-button>
        </el-form-item>
      </el-form>

      <div class="table-box">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="selection" width="50px" />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      searchParams: {
        date: ''
      },
      tableData: [
        {}, {}, {}
      ],
      columns: [
        { prop: '标准名称', label: '标准名称', width: '', minWidth: '' },
        { prop: '标准编码', label: '标准编码', width: '', minWidth: '' },
        { prop: '数据类型', label: '数据类型', width: '', minWidth: '' },
        { prop: '状态', label: '状态', width: '', minWidth: '' },
        { prop: '所属目录', label: '所属目录 ', width: '', minWidth: '' },
        { prop: '开始时间', label: '开始时间', width: '', minWidth: '' },
        { prop: '创建人', label: '创建人', width: '', minWidth: '' },
        { prop: '描述', label: '描述', width: '', minWidth: '' }
      ]
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
